import React, { Fragment, useState, useEffect, useRef, useCallback } from 'react';
import EchartsGL from 'echarts-gl';
import globalph from '../../images/golbal.jpg';
import iron from '../../images/iron.jpg';
import starfield from '../../images/starfield.jpg';


export default (props) => {
    const [option, setOption] = useState({}); // 图形数据

    useEffect(() =>{
        const gloption = {
            backgroundColor: '#000',
            globe: {
                baseTexture: globalph,
                heightTexture: iron,
                displacementScale: 0.2,
                shading: 'realistic',
                environment: starfield,
                realisticMaterial: {
                    textureTiling: [8, 4]
                },
                postEffect: {
                    enable: true
                },
                viewControl: {
                    autoRotate: false
                },
                light: {
                    main: {
                        intensity: 2,
                        shadow: true
                    },
                    ambientCubemap: {
                        texture: '../../images/pisa.hdr',
                        exposure: 2,
                        diffuseIntensity: 2,
                        specularIntensity: 2
                    }
                }
            }
        };
        setOption(gloption);
    });

    return (
        <Fragment>
            <EchartsGL option={option} />
        </Fragment>
    )
}
